<div class="main-container" id="main-container">
            <script type="text/javascript">
                try{ace.settings.check('main-container' , 'fixed')}catch(e){}
            </script>

            <div class="main-container-inner">
                <a class="menu-toggler" id="menu-toggler" href="#">
                    <span class="menu-text"></span>
                </a>




 <?php $this->partial("shared/menu") ?>




                <div class="main-content">
                    <div class="breadcrumbs" id="breadcrumbs">
                        <script type="text/javascript">
                            try{ace.settings.check('breadcrumbs' , 'fixed')}catch(e){}
                        </script>

                        <ul class="breadcrumb">
                            <li>
                                <i class="icon-home home-icon"></i>
                                <a href="#">Home</a>
                            </li>

                            <li>
                                <a href="#">Tables</a>
                            </li>
                            <li class="active">jqGrid plugin</li>
                        </ul><!-- .breadcrumb -->

                        <div class="nav-search" id="nav-search">
                            <form class="form-search">
                                <span class="input-icon">
                                    <input type="text" placeholder="Search ..." class="nav-search-input" id="nav-search-input" autocomplete="off" />
                                    <i class="icon-search nav-search-icon"></i>
                                </span>
                            </form>
                        </div><!-- #nav-search -->
                    </div>

                    <div class="page-content">




                            <div class="col-xs-12">

                                <!-- 搜索项开始-->
                                <div class="row">
                                <div class="widget-box">
                                            <div class="widget-header widget-header-small">
                                                <h5 class="lighter">搜索选项</h5>
                                                <span class="widget-toolbar">

                                                        <a data-action="reload" href="#">
                                                            <i class="icon-refresh"></i>
                                                        </a>

                                                        <a data-action="collapse" href="#">
                                                            <i class="icon-chevron-up"></i>
                                                        </a>
                                                    </span>
                                            </div>

                                            <div class="widget-body">
                                                <div class="widget-main">
                                                    <form class="form-search">
                                                        <div class="row">
                                                            <div class="col-xs-12 col-sm-8">
                                                                <div class="input-group">
                                                                    <input type="text" placeholder="帐号" class="input-small">
                                                                    <input type="text" placeholder="真实姓名" class="input-small">
                                                                    <input type="text" placeholder="邮箱">

                                                                    <select name="status">
                                                                        <option value="">状态...</option>
                                                                        <?php foreach ($lockStatusOptions as $id =>$statusDesc):?>
                                                                        <option value="<?php echo $id;?>" <?php echo $filters['status'] == $id ? 'selected' :'';?>><?php echo $statusDesc;?></option>
                                                                        <?php endforeach;?>

                                                                    </select>

                                                                    <select name="type">
                                                                        <option value="">会员类型...</option>
                                                                        <?php foreach ($memberTypeOptions as $id =>$typeName):?>
                                                                        <option value="<?php echo $id;?>" <?php echo $filters['type_id'] == $id ? 'selected' :'';?>><?php echo $typeName;?></option>
                                                                        <?php endforeach;?>

                                                                    </select>

                                                                    <select name="rank">
                                                                        <option value="">会员类型...</option>
                                                                        <?php foreach ($memberRankOptions as $id =>$rankName):?>
                                                                        <option value="<?php echo $id;?>" <?php echo $filters['rank_id'] == $id ? 'selected' :'';?>><?php echo $rankName;?></option>
                                                                        <?php endforeach;?>

                                                                    </select>

                                                                    <span class="input-group-btn">
                                                                        <button class="btn btn-purple btn-sm" type="button">
                                                                            搜索
                                                                            <i class="icon-search icon-on-right bigger-110"></i>
                                                                        </button>
                                                                    </span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </form>
                                                </div>
                                            </div>
                                        </div>
                                        <!-- 搜索项截止-->

                                <!-- PAGE CONTENT BEGINS -->

                                <table id="grid-table"></table>

                                <div id="grid-pager"></div>

                                <script type="text/javascript">
                                    var $path_base = "/";//this will be used in gritter alerts containing images
                                </script>

                                <!-- PAGE CONTENT ENDS -->
                            </div><!-- /.col -->
                        </div><!-- /.row -->
                    </div><!-- /.page-content -->
                </div><!-- /.main-content -->

                <div class="ace-settings-container" id="ace-settings-container">
                    <div class="btn btn-app btn-xs btn-warning ace-settings-btn" id="ace-settings-btn">
                        <i class="icon-cog bigger-150"></i>
                    </div>

                    <div class="ace-settings-box" id="ace-settings-box">
                        <div>
                            <div class="pull-left">
                                <select id="skin-colorpicker" class="hide">
                                    <option data-skin="default" value="#438EB9">#438EB9</option>
                                    <option data-skin="skin-1" value="#222A2D">#222A2D</option>
                                    <option data-skin="skin-2" value="#C6487E">#C6487E</option>
                                    <option data-skin="skin-3" value="#D0D0D0">#D0D0D0</option>
                                </select>
                            </div>
                            <span>&nbsp; Choose Skin</span>
                        </div>

                        <div>
                            <input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-navbar" />
                            <label class="lbl" for="ace-settings-navbar"> Fixed Navbar</label>
                        </div>

                        <div>
                            <input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-sidebar" />
                            <label class="lbl" for="ace-settings-sidebar"> Fixed Sidebar</label>
                        </div>

                        <div>
                            <input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-breadcrumbs" />
                            <label class="lbl" for="ace-settings-breadcrumbs"> Fixed Breadcrumbs</label>
                        </div>

                        <div>
                            <input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-rtl" />
                            <label class="lbl" for="ace-settings-rtl"> Right To Left (rtl)</label>
                        </div>

                        <div>
                            <input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-add-container" />
                            <label class="lbl" for="ace-settings-add-container">
                                Inside
                                <b>.container</b>
                            </label>
                        </div>
                    </div>
                </div><!-- /#ace-settings-container -->
            </div><!-- /.main-container-inner -->

            <a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse">
                <i class="icon-double-angle-up icon-only bigger-110"></i>
            </a>
        </div><!-- /.main-container -->

        <!-- basic scripts -->

        <!--[if !IE]> -->

        <script type="text/javascript">
            window.jQuery || document.write("<script src='/assets/js/jquery-2.0.3.min.js'>"+"<"+"/script>");
        </script>

        <!-- <![endif]-->

        <!--[if IE]>
<script type="text/javascript">
 window.jQuery || document.write("<script src='/assets/js/jquery-1.10.2.min.js'>"+"<"+"/script>");
</script>
<![endif]-->

        <script type="text/javascript">
            if("ontouchend" in document) document.write("<script src='/assets/js/jquery.mobile.custom.min.js'>"+"<"+"/script>");
        </script>
        <script src="/assets/js/bootstrap.min.js"></script>
        <script src="/assets/js/typeahead-bs2.min.js"></script>

        <!-- page specific plugin scripts -->

        <script src="/assets/js/date-time/bootstrap-datepicker.min.js"></script>
        <script src="/assets/js/jqGrid/jquery.jqGrid.src.js"></script>
        <script src="/assets/js/jqGrid/i18n/grid.locale-cn.js"></script>

        <!-- ace scripts -->

        <script src="/assets/js/ace-elements.min.js"></script>
        <script src="/assets/js/ace.min.js"></script>

        <!-- inline scripts related to this page -->

        <script type="text/javascript">

        $(document).ready(function() {
                var height = $(window).height();
                $('.ui-jqgrid-bdiv').style='';
        })

            var grid_data =
            [
            <?php foreach($members as $member):?>
                {
                    id:"<?php echo $member->id;?>",
                    username:"<?php echo $member->username;?>",
                    nickname:"<?php echo $member->nickname;?>",
                    del:"<?php echo $member->status ? '已禁用' : '正常';?>",
                    type:"<?php echo $memberTypeOptions[$member->type_id];?>",
                    rank:"<?php echo $memberRankOptions[$member->rank_id];?>",
                    email:"<?php echo $member->email;?>",
                    mobile:"<?php echo $member->mobile;?>",
                    phone:"<?php echo $member->phone;?>",
                    birthday:"<?php echo $member->birthday;?>",
                    register_time:"<?php echo $member->register_time;?>",
                    last_login_time:"<?php echo $member->last_login_time;?>",
                    realname:"<?php echo $member->realname;?>"
                },
            <?php endforeach;?>

            ];

            jQuery(function($) {



                var grid_selector = "#grid-table";
                var pager_selector = "#grid-pager";

                jQuery(grid_selector).jqGrid({
                    //direction: "rtl",

                    data: grid_data,
                    datatype: "local",
                    height: 200,
                    shrinkToFit:false,
                    autoScroll: true,

                    colNames:[' ', '帐号','状态', '昵称','真实姓名','会员类型','会员等级','邮箱', '手机','电话','生日','注册时间','上次登陆时间'],
                    colModel:[
                        {name:'myac',index:'', width:90, fixed:true, sortable:false, resize:true,
                            formatter:'actions',
                            formatoptions:{
                                keys:true,

                                delOptions:{recreateForm: true, beforeShowForm:beforeDeleteCallback},
                                editformbutton:true, editOptions:{
                                    closeAfterEdit: true, //编辑成功后是否自动关闭窗口
                                    recreateForm: true,
                                    beforeShowForm:beforeEditCallback,
                                    reloadAfterSubmit:true,
                                    afterSubmit : function(response, postdata)
                                    {
                                        console.log(response);
                                        //return [success,message,new_id]
                                    }
                                } //注释此行后是inline的编辑模式
                            }
                        },
                        {name:'username',index:'username', width:90,editable: false,editoptions:{size:"20",maxlength:"30"}},
                        {name:'del',index:'del', width:120, editable: true,edittype:"checkbox",editoptions: {value:"正常:已禁用"},unformat: aceSwitch},
                        {name:'nickname',index:'nickname', width:100,editable: true,editoptions:{size:"20",maxlength:"30"}},
                        {name:'realname',index:'realname', width:100,editable: true,editoptions:{size:"20",maxlength:"30"}},
                        {name:'type',index:'type', width:100, editable: true,edittype:"select",editoptions:{value:"<?php echo $memberTypeStr;?>"}},
                        {name:'rank',index:'rank', width:100, editable: true,edittype:"select",editoptions:{value:"<?php echo $memberRankStr;?>"}},

                        {name:'email',index:'email', width:200,editable: true,editoptions:{size:"20",maxlength:"30"}},
                        {name:'mobile',index:'mobile', width:120,editable: true,editoptions:{size:"20",maxlength:"30"}},
                        {name:'phone',index:'phone', width:120,editable: true,editoptions:{size:"20",maxlength:"30"}},

                        {name:'birthday',index:'birthday',width:100, editable:true, sorttype:"date", unformat: pickDate},
                        {name:'register_time',index:'register_time',width:150, editable:false, sorttype:"date"},
                        {name:'last_login_time',index:'last_login_time',width:150, editable:false, sorttype:"date"},




                    ],

                    viewrecords : true,
                    rowNum:11,
                    rowList:[10,20,30],
                    pager : pager_selector,
                    pgtext:"第{0}页 共{1}页",
                    altRows: true,
                    //toppager: true,

                    multiselect: true,
                    //multikey: "ctrlKey",
                    multiboxonly: true,

                    loadComplete : function() {
                        var table = this;
                        setTimeout(function(){
                            styleCheckbox(table);

                            updateActionIcons(table);
                            updatePagerIcons(table);
                            enableTooltips(table);
                        }, 0);
                    },

                    editurl: "member/edit",//nothing is saved
                    //caption: "jqGrid with inline editing",


                    autowidth: true

                });

                //enable search/filter toolbar
                //jQuery(grid_selector).jqGrid('filterToolbar',{defaultSearch:true,stringResult:true})

                //switch element when editing inline
                function aceSwitch( cellvalue, options, cell ) {
                    setTimeout(function(){
                        $(cell) .find('input[type=checkbox]')
                                .wrap('<label class="inline" />')
                            .addClass('ace ace-switch ace-switch-5')
                            .after('<span class="lbl"></span>');
                    }, 0);
                }
                //enable datepicker
                function pickDate( cellvalue, options, cell ) {
                    setTimeout(function(){
                        $(cell) .find('input[type=text]')
                                .datepicker({format:'yyyy-mm-dd' , autoclose:true});
                    }, 0);
                }


                //navButtons
                jQuery(grid_selector).jqGrid('navGrid',pager_selector,
                    {   //navbar options
                        edit: true,
                        editicon : 'icon-pencil blue',
                        add: true,
                        addicon : 'icon-plus-sign purple',
                        del: true,
                        delicon : 'icon-trash red',
                        search: true,
                        searchicon : 'icon-search orange',
                        refresh: true,
                        refreshicon : 'icon-refresh green',
                        view: true,
                        viewicon : 'icon-zoom-in grey',
                    },
                    {
                        //edit record form
                        //closeAfterEdit: true,
                        recreateForm: true,
                        beforeShowForm : function(e) {
                            var form = $(e[0]);
                            form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
                            style_edit_form(form);
                        }
                    },
                    {
                        //new record form
                        closeAfterAdd: true, //添加成功后自动关闭窗口
                        recreateForm: true,
                        viewPagerButtons: false,
                        beforeShowForm : function(e) {
                            var form = $(e[0]);
                            form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
                            style_edit_form(form);
                        }
                    },
                    {
                        //delete record form
                        recreateForm: true,
                        beforeShowForm : function(e) {
                            var form = $(e[0]);
                            if(form.data('styled')) return false;

                            form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
                            style_delete_form(form);

                            form.data('styled', true);
                        },
                        onClick : function(e) {
                            alert(1);
                        }
                    },
                    {
                        //search form
                        recreateForm: true,
                        afterShowSearch: function(e){
                            var form = $(e[0]);
                            form.closest('.ui-jqdialog').find('.ui-jqdialog-title').wrap('<div class="widget-header" />')
                            style_search_form(form);
                        },
                        afterRedraw: function(){
                            style_search_filters($(this));
                        }
                        ,
                        multipleSearch: true,
                        /**
                        multipleGroup:true,
                        showQuery: true
                        */
                    },
                    {
                        //view record form
                        recreateForm: true,
                        beforeShowForm: function(e){
                            var form = $(e[0]);
                            form.closest('.ui-jqdialog').find('.ui-jqdialog-title').wrap('<div class="widget-header" />')
                        }
                    }
                )



                function style_edit_form(form) {
                    //enable datepicker on "sdate" field and switches for "stock" field
                    form.find('input[name=sdate]').datepicker({format:'yyyy-mm-dd' , autoclose:true})
                        .end().find('input[name=stock]')
                              .addClass('ace ace-switch ace-switch-5').wrap('<label class="inline" />').after('<span class="lbl"></span>');

                    //update buttons classes
                    var buttons = form.next().find('.EditButton .fm-button');
                    buttons.addClass('btn btn-sm').find('[class*="-icon"]').remove();//ui-icon, s-icon
                    buttons.eq(0).addClass('btn-primary').prepend('<i class="icon-ok"></i>');
                    buttons.eq(1).prepend('<i class="icon-remove"></i>')

                    buttons = form.next().find('.navButton a');
                    buttons.find('.ui-icon').remove();
                    buttons.eq(0).append('<i class="icon-chevron-left"></i>');
                    buttons.eq(1).append('<i class="icon-chevron-right"></i>');
                }

                function style_delete_form(form) {
                    var buttons = form.next().find('.EditButton .fm-button');
                    buttons.addClass('btn btn-sm').find('[class*="-icon"]').remove();//ui-icon, s-icon
                    buttons.eq(0).addClass('btn-danger').prepend('<i class="icon-trash"></i>');
                    buttons.eq(1).prepend('<i class="icon-remove"></i>')
                }

                function style_search_filters(form) {
                    form.find('.delete-rule').val('X');
                    form.find('.add-rule').addClass('btn btn-xs btn-primary');
                    form.find('.add-group').addClass('btn btn-xs btn-success');
                    form.find('.delete-group').addClass('btn btn-xs btn-danger');
                }
                function style_search_form(form) {
                    var dialog = form.closest('.ui-jqdialog');
                    var buttons = dialog.find('.EditTable')
                    buttons.find('.EditButton a[id*="_reset"]').addClass('btn btn-sm btn-info').find('.ui-icon').attr('class', 'icon-retweet');
                    buttons.find('.EditButton a[id*="_query"]').addClass('btn btn-sm btn-inverse').find('.ui-icon').attr('class', 'icon-comment-alt');
                    buttons.find('.EditButton a[id*="_search"]').addClass('btn btn-sm btn-purple').find('.ui-icon').attr('class', 'icon-search');
                }

                function beforeDeleteCallback(e) {
                    var form = $(e[0]);
                    if(form.data('styled')) return false;

                    form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
                    style_delete_form(form);

                    form.data('styled', true);
                }

                function beforeEditCallback(e) {
                    var form = $(e[0]);
                    form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
                    style_edit_form(form);
                }



                //it causes some flicker when reloading or navigating grid
                //it may be possible to have some custom formatter to do this as the grid is being created to prevent this
                //or go back to default browser checkbox styles for the grid
                function styleCheckbox(table) {
                /**
                    $(table).find('input:checkbox').addClass('ace')
                    .wrap('<label />')
                    .after('<span class="lbl align-top" />')


                    $('.ui-jqgrid-labels th[id*="_cb"]:first-child')
                    .find('input.cbox[type=checkbox]').addClass('ace')
                    .wrap('<label />').after('<span class="lbl align-top" />');
                */
                }


                //unlike navButtons icons, action icons in rows seem to be hard-coded
                //you can change them like this in here if you want
                function updateActionIcons(table) {
                    /**
                    var replacement =
                    {
                        'ui-icon-pencil' : 'icon-pencil blue',
                        'ui-icon-trash' : 'icon-trash red',
                        'ui-icon-disk' : 'icon-ok green',
                        'ui-icon-cancel' : 'icon-remove red'
                    };
                    $(table).find('.ui-pg-div span.ui-icon').each(function(){
                        var icon = $(this);
                        var $class = $.trim(icon.attr('class').replace('ui-icon', ''));
                        if($class in replacement) icon.attr('class', 'ui-icon '+replacement[$class]);
                    })
                    */
                }

                //replace icons with FontAwesome icons like above
                function updatePagerIcons(table) {
                    var replacement =
                    {
                        'ui-icon-seek-first' : 'icon-double-angle-left bigger-140',
                        'ui-icon-seek-prev' : 'icon-angle-left bigger-140',
                        'ui-icon-seek-next' : 'icon-angle-right bigger-140',
                        'ui-icon-seek-end' : 'icon-double-angle-right bigger-140'
                    };
                    $('.ui-pg-table:not(.navtable) > tbody > tr > .ui-pg-button > .ui-icon').each(function(){
                        var icon = $(this);
                        var $class = $.trim(icon.attr('class').replace('ui-icon', ''));

                        if($class in replacement) icon.attr('class', 'ui-icon '+replacement[$class]);
                    })
                }

                function enableTooltips(table) {
                    $('.navtable .ui-pg-button').tooltip({container:'body'});
                    $(table).find('.ui-pg-div').tooltip({container:'body'});
                }

                //var selr = jQuery(grid_selector).jqGrid('getGridParam','selrow');


            });
        </script>